<template>
	<view class="pay">
		<view class="pay_price">
			<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/pay_price.png" mode=""></image>
			<view class="pay_price_item">
				<text>报名金额</text>
				<view class="price">￥{{ orderdetail.total_price }}</view>
			</view>
		</view>
		<view class="pay_info">
			<view class="pay_info_item">
				<view class="left item pay_info_item_t">
			<!-- 		{{ activename }}
					<text>{{ orderdetail.team_name }}</text> -->
					<view class="pay_info_title">
						{{activename}} 
					</view>
					<view class="pay_info_group">
						{{orderdetail.team_name}}
					</view>
				</view>
			</view>
			<view class="pay_info_item">
				<view class="left item">报名费用</view>
				<view class="right item">
					<view class="right_number">×1</view>
					<view class="right_price">￥{{ singmoney }}</view>
				</view>
			</view>
		</view>
		<!-- 附加服务费用 -->
		<view class="a_service" v-if="servicelist.length">
			<view class="a_service_title pad">附加服务</view>
			<view class="service_contant_contant pad ">
				<view class="service_contant " v-for="(item, index) in servicelist" :key="index">
					<view class="service_contant_top">
						<view class="left">{{ item.ser_name }}</view>
						<view class="right">
							<text>×{{ item.num }}</text>
							<text class="right_r">￥{{ (item.num * item.ser_price).toFixed(2) }}</text>
						</view>
					</view>
					<!-- 		<view class="service_contant_bot">
						该服务包含：{{item.info}}
					</view> -->
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="par_awy">
			<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/other/wechat_pay.png" mode=""></image>
			微信支付
		</view>
		<view class="tips_bot">
			<!-- 备注 -->
			<view class="ps" v-if="verify == 'true'">
				<text>注：</text>
				该活动需要审核,如果审核未通过，报名费用原路返回
				<!-- <image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/othertwo/pay_tips.png" mode=""></image> -->
			</view>
			<!-- 支付按钮 -->
			<view class="pay_button">
				<view class="left">
					合计金额：
					<text>￥{{ orderdetail.total_price }}</text>
				</view>
				<view class="right" @tap="comfir_pay">立即支付</view>
			</view>
		</view>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
		<navigation></navigation>
	</view>
</template>

<script>
import loading from '@/components/loading/loading.vue';
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: { loading, navigation },
	data() {
		return {
			loadflag: true,
			service_list: [
				{ service: '格林豪泰快捷酒店服务', price: '￥99.00', info: '房间为标准间服务，11月15日晚上06:00前准备入住，请您核实好时间...' },
				{ service: '大巴服务', price: '￥99.00', info: '房间为标准间服务，11月15日晚上06:00前准备入住，请您核实好时间...' }
			],
			id: '',
			orderdetail: {},
			servicelist: [],
			orderInfo: {},
			ser_all_price: 0,
			order: {},
			activename: '',
			singmoney: 0,
			verify: ''
		};
	},
	onLoad(options) {
		 // console.log (options);
		this.id = options.id;
		this.activename = options.activename;
		this.verify = options.verify;
		 // console.log (this.verify );
		// this.orderInfo = JSON.parse(options.active)
		//  // console.log (this.orderInfo)
	},
	mounted() {
		// this.comfir_pay()
		this.getOrderdetail();
	},
	methods: {
		// 获取订单信息
		getOrderdetail() {
			this.ajax('order/orderDetail', {
				data: {
					id: this.id
				},
				success: res => {
					 // console.log (res);
					this.orderdetail = res.msg;
					// 服务信息
					this.servicelist = res.msg.service;
					var ser = res.msg.service;
					ser.forEach(e => {
						var a_price = e.num * e.ser_price;
						 // console.log (a_price);
						this.ser_all_price += a_price;
						 // console.log (this.ser_all_price);
					});
					this.singmoney = (this.orderdetail.total_price - this.ser_all_price).toFixed(2);
					 // console.log (res);
					this.loadflag = false;
				}
			});
		},
		// 支付
		comfir_pay() {
			this.ajax('pay/orderSeller', {
				data: {
					id: this.id
				},
				success: res => {
					 // console.log (res);
					if (res.code) {
						uni.navigateTo({
							url: '/pageB/pay/sucesspay'
						});
					} else {
						uni.showModal({
							title: '温馨提示',
							content: '支付失败，请重新支付',
							showCancel: false,
							cancelText: '',
							confirmText: '确定',
							success: res => {},
							fail: () => {},
							complete: () => {}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.pay_price {
	width: 100%;
	height: 190upx;
	overflow: hidden;
	position: relative;
	image {
		width: 100%;
		height: 190upx;
	}
	.pay_price_item {
		position: absolute;
		top: 50%;
		left: 50%;
		text-align: center;
		transform: translate(-50%, -50%);
		text {
			display: block;
			font-size: 32upx;
			color: #ffffff;
			margin-bottom: 15upx;
		}
		.price {
			font-size: 36upx;
			color: #ffffff;
			font-weight: bold;
		}
	}
}
.pay_info {
	width: 100%;
	padding: 0 30upx;
	background-color: #ffffff;
	box-sizing: border-box;
	.pay_info_item {
		width: 100%;
		min-height: 100upx;
		border-bottom: 2upx solid #f2f2f2;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.item {
			font-size: 28upx;
			color: #333333;
			text {
				font-size: 24upx;
				color: #999;
				margin-left: 10upx;
			}
		}
		.right {
			min-width: 200upx;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #8530e8;
			.right_number {
				color: #c1c1c1;
				font-size: 28upx;
			}
			.right_price {
				color: #8530e8;
				font-size: 28upx;
			}
		}
		.pay_info_item_t {
			// max-width: 100%;
			// font-weight: bold;
			// overflow:hidden; //超出的文本隐藏
			// text-overflow:ellipsis; //溢出用省略号显示
			// white-space:nowrap;
			display: flex;
			.pay_info_title {
				font-size: 32upx;
				color: #333333;
				font-weight: bold;
				max-width: 470upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.pay_info_group {
				font-size: 24upx;
				color: #999;
				max-width: 220upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 16upx;
				display: flex;
				align-items: center;
			}
		}
	}
	.pay_info_item:last-child {
		border-bottom: 0;
	}
}
.par_awy {
	width: 100%;
	height: 90upx;
	background-color: #ffffff;
	padding: 0 30upx;
	box-sizing: border-box;
	font-size: 28upx;
	color: #333333;
	line-height: 90upx;
	display: flex;
	align-items: center;
	margin-top: 10upx;
	image {
		width: 36upx;
		height: 32upx;
		margin-right: 10upx;
	}
}
.tips_bot {
	position: fixed;
	bottom: 0;
	left: 0;
}
.pay_button {
	width: 100%;
	height: 90upx;
	background-color: #ffffff;
	display: flex;
	.left {
		width: 430upx;
		height: 100%;
		border-top: 2upx solid #e1e1e1;
		box-sizing: border-box;
		padding-left: 30upx;
		font-size: 28upx;
		color: #999;
		line-height: 90upx;
		text {
			font-size: 28upx;
			color: #8938d3;
			font-weight: bold;
		}
	}
	.right {
		flex: 1;
		height: 100%;
		background: linear-gradient(to right, #8838d2 0%, #bb78f9 100%);
		font-size: 30upx;
		color: #ffffff;
		text-align: center;
		line-height: 90upx;
	}
}
// 附加服务费
.a_service {
	margin-bottom: 10upx;
	.a_service_title {
		width: 100%;
		height: 66upx;
		background-color: #f2f2f2;
		color: #999999;
		font-size: 24upx;
		line-height: 66upx;
	}
	.service_contant_contant {
		background-color: #ffffff;
	}
	.service_contant {
		padding: 30upx 0;
		box-sizing: border-box;
		border-bottom: 2upx solid #e1e1e1;
		background-color: #ffffff;
		.service_contant_top {
			display: flex;
			justify-content: space-between;
			.left {
				font-size: 28upx;
				color: #333333;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				max-width: 500upx;
			}
			.right {
				min-width: 200upx;
				display: flex;
				justify-content: space-between;
				text {
					font-size: 28upx;
					color: #c1c1c1;
				}
				.right_r {
					font-size: 28upx;
					color: #8530e8;
					margin-right: 0;
					text-align: right;
				}
			}
		}
		.service_contant_bot {
			margin-top: 10upx;
			font-size: 24upx;
			color: #999999;
			line-height: 40upx;
		}
	}
	.service_contant:last-child {
		border-bottom: 0;
	}
}
.tips_bot {
	width: 100%;
}
.ps {
	width: 100%;
	// height: 86upx;
	padding: 0 30upx;
	height: 60upx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	font-size: 22upx;
	background-color: #fbf0e9;
	color: #999;
	image {
		width: 100%;
		height: 26upx;
		margin-top: 2upx;
	}
	text {
		color: red;
	}
}
.pay {
	position: relative;
	padding-bottom: 100upx;
}
.pad {
	padding: 0 30upx;
	box-sizing: border-box;
}
</style>
<style>
page {
	background-color: #f2f2f2;
}
</style>
